<template>
  <div>
    <div class="headerBG page-slide-down">
    </div>
    <div class="profileTitle">我的</div>
    <div class="contentWrap page-fade-in">
      <el-card class="box-card" shadow="never" @click.native="logout">
        <el-row slot="header" class="clearfix">
          <el-col class="headPic" :span="6">
            <img src="../../assets/images/profile/1.png" alt="" width="69">
          </el-col>
          <div class="info" :span="18">
            <div class="name">{{ merchant.name }}</div>
            <div class="sort">经营类别：个体工商户-线下零售-便利店</div>
            <div class="bank">开户行：交通银行厦门软件园支行</div>
          </div>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-row class="icon">
              <el-col :span="4">
                <img src="../../assets/images/profile/4.png" alt="" width="24">
              </el-col>
              <el-col :span="20" class="metaInfo">
                <span class="number">{{ handlePhoneNumber(merchant.account) }}</span>
                <span class="numberName">商户账号(手机号)</span>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="13">
            <el-row class="icon">
              <el-col :span="4">
                <img src="../../assets/images/profile/5.png" alt="" width="24">
              </el-col>
              <el-col :span="20" class="metaInfo">
                <span class="number">6214 8386 2504 8386</span>
                <span class="numberName">银行卡号</span>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-card>
      <el-row :gutter="7" class="earnedCash">
        <el-col :span="12">
          <div class="curMonth card-item">
            <div>本月已赚取佣金(元)</div>
            <div class="amount">500.00</div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="totalMonth card-item">
            <div>累计已赚取佣金(元)</div>
            <div class="amount">2500.00</div>
          </div>
        </el-col>
      </el-row>
      <el-row style="margin-top:15px; padding: 16px 20px; background: #fff; border-radius: 4px;">
        <div class="optionTitle">
          <span>申请提现</span>
        </div>
        <div class="optionGroup">
          <div class="op-item" @click="$router.push('/orderList')">
            <div>
              <img src="../../assets/images/profile/8.png" alt="" width="22">
              <span>查看提现订单</span>
            </div>
            <div>
              <img src="../../assets/images/profile/12.png" alt="" width="20">
            </div>
          </div>
          <div class="op-item" @click="$router.push('/bindWechat')">
            <div>
              <img src="../../assets/images/profile/6.png" alt="" width="22">
              <span>绑定收款微信</span>
            </div>
            <div>
              <img src="../../assets/images/profile/12.png" alt="" width="20">
            </div>
          </div>
          <div class="op-item" style="border-bottom: 0" @click="$router.push('/changePwd')">
            <div>
              <img src="../../assets/images/profile/7.png" alt="" width="22">
              <span>修改密码</span>
            </div>
            <div>
              <img src="../../assets/images/profile/12.png" alt="" width="20">
            </div>
          </div>
        </div>
      </el-row>
    </div>
  </div>
</template>

<script>
import {Calendar} from 'vant';

export default {
  name: "profile",
  components: {Calendar},
  data() {
    return {
      merchant: "",
      show: false
    }
  },
  created() {
    this.merchant = JSON.parse(localStorage.getItem("user"))
  },
  methods: {
    logout() {
      localStorage.removeItem("token")
      localStorage.removeItem("user")
      this.$router.push("/login")
    },
    handlePhoneNumber(num) {
      let reg = /^(\d{3})(\d{4})(\d{4})$/;
      let matches = reg.exec(num);
      return matches[1] + ' ' + matches[2] + ' ' + matches[3];
    }
  }
}
</script>

<style lang="scss" scoped>
.page-fade-in {
  opacity: 0;
  animation: page-fade-in .6s both cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes page-fade-in {
  0% {
    opacity: 0;
    top: 130px;
  }

  100% {
    opacity: 1;
    top: 100px;
  }
}

.page-slide-down {
  animation: page-slide-down 1s both cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes page-slide-down {
  0% {
    top: -60px;
  }

  100% {
    top: 0;
  }
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.headerBG {
  position: relative;
  z-index: -999;
  top: 0;
  width: 100%;
  max-width: 768px;
  height: 190px;
  background: linear-gradient(105deg, rgba(253, 110, 5, 0.66) 31%, #fd6e05 77%) center;
  clip-path: inset(0 -15% round 0 0 35% 35%);
  -webkit-clip-path: inset(0 -15% round 0 0 35% 35%);

}

.profileTitle {
  width: 100%;
  height: 44px;
  line-height: 44px;
  color: #fff;
  background: transparent;
  font-weight: bold;
  font-size: 18px;
  position: absolute;
  top: 44px;
}

.contentWrap {
  position: absolute;
  top: 100px;
  left: 50%;
  width: calc(100% - 30px);
  max-width: 738px;
  min-height: fit-content;
  transform: translateX(-50%);
}

.el-card {
  max-height: 220px;
  overflow: hidden;
  box-sizing: border-box;
  padding: 5px 15px 0 15px;
  border: 0;

  .clearfix {
    .info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding-left: 10px;

      .name {
        font-size: 16px;
        font-weight: bold;
      }

      .sort {
        background: rgba(253, 110, 5, .1);
        font-size: 11px;
        color: rgba(51, 51, 51, .7);
        height: 20px;
        line-height: 20px;
        padding: 0 4px;
        margin: 6px 0;
      }

      .bank {
        opacity: 0.7;
        font-size: 11px;
      }
    }
  }

  .icon {
    padding: 15px 0;
    display: flex;
    align-items: center;

    .metaInfo {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding-left: 6px;
    }


    .number {
      opacity: 0.85;
      font-size: 13px;
      line-height: 20px;
      font-weight: bold;
      text-align: left;
    }

    .numberName {
      opacity: 0.7;
      font-size: 12px;
      line-height: 20px;
    }
  }

  & > > > .el-card__header {
    padding: 15px 0;
  }

  & > > > .el-card__body {
    padding: 0;
  }
}

.earnedCash {
  margin-top: 15px;

  .curMonth,
  .totalMonth {
    padding: 12px 20px;
    background: #fff;
    border-radius: 4px;
  }

  .curMonth {
    background: url(../../assets/images/profile/2.png) center no-repeat;
    background-size: cover;
  }

  .totalMonth {
    background: url(../../assets/images/profile/3.png) center no-repeat;
    background-size: cover;
  }

  .card-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 11px;
    color: rgba(51, 51, 51, .65);

    .amount {
      font-size: 18px;
      font-weight: 500;
      margin-top: 6px;
      color: #333;
    }
  }
}

.optionTitle {
  text-align: left;
  font-size: 16px;
  color: #1e2431;
  font-weight: bold;
  padding-bottom: 6px;
}

.optionGroup {
  .op-item {
    div {
      display: flex;
      align-items: center;

      span {
        display: inline-block;
        padding-left: 7px;
        font-size: 14px;
        line-height: 20px;
        color: #333;
      }
    }

    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    background-color: #fff;
    border-bottom: 1px solid rgba(112, 112, 112, .1);
  }
}

.themeButton {
  width: 100%;
  height: 42px;
  margin-top: 16px;
  color: #fff;
  opacity: 1;
  background: linear-gradient(90deg, rgba(253, 110, 5, 0.66) 10%, #fd6e05 81%);
  border-radius: 21px;
  border: none;
  transition: all .5s ease;

  &:hover,
  &:active {
    filter: brightness(1.1);
    box-shadow: 0 7px 25px 0 rgba(253, 110, 5, 0.41);
  }
}
</style>
